<template>
  <main v-if="!isLogin && !isGrid" class="main-container">
    <div v-if="!onlyPage" class="topPart">
      <HeaderPart />
    </div>

    <div class="bottom">
      <NavPart v-if="!onlyPage" />
      <div class="right" :style="{ paddingTop: onlyPage ? '10px' : '10px' }">
        <div class="content">
          <el-config-provider :locale="locale">
            <router-view />
          </el-config-provider>
        </div>
      </div>
    </div>
  </main>

  <router-view v-if="isLogin || isGrid" />
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { useRouter } from 'vue-router'
import getParam from '@/utils/getParam'

import HeaderPart from '@/components/Header.vue'
import NavPart from '@/components/Nav.vue'

export default defineComponent({
  name: 'App',
  components: {
    ElConfigProvider,
    HeaderPart,
    NavPart
  },
  setup() {
    const isLogin = ref(false)
    const isGrid = ref(false)
    // areaGrid
    const router = useRouter()
    watch(
      () => router.currentRoute.value,
      (_n) => {
        isLogin.value = _n.path === '/login';
        isGrid.value = _n.path === '/areaGrid';

        console.log('areaGrid', isGrid.value, _n.path)
      }
    )
    const onlyPage = getParam('onlyPage')
    const locale = zhCn

    return { onlyPage, locale, isLogin, isGrid }
  }
})
</script>

<style lang="stylus">
:deep(.el-button.is-link){
  color: #1F35DB
  font-weight: normal;
}
:deep(.el-button){
  color: #fff
  background-color: #4A5FF0
  border-color: #4A5FF0;
  &:hover{
    background-color: #576af3
    border-color: #576af3;
  }
}
:deep(.el-pager){
  li{
    &:hover,
    &.is-active{
      color: #1F35DB
    }
  }
}
</style>

<style scoped lang="stylus">
//@import "@/style/basic.styl"

$top-height = 60px
$left-side-width = 200px



.main-container {
  background $second-background-color
  box-sizing border-box
  display flex
  flex-direction column
  justify-content space-between

  .topPart {
    position relative
    box-sizing border-box
    width 100%
    height $top-height
    min-height: $top-height;
  }

  .bottom {
    position relative
    box-sizing border-box
    display flex
    justify-content space-between
    overflow: hidden;
    //padding-top: 40px
    //min-height: calc(100vh - 120px);

    .right {
      width 100%
      box-sizing border-box
      padding 10px

      .content {
        width 100%
        height 100%
        background $background-color
        border-radius 5px
        box-sizing border-box
        padding 10px
      }
    }
  }
}

.page-links {
  a {
    font-weight: bold;
    margin: 0 20px;
  }
}
</style>
